<template>
  <ContainerGroup>
    <Container>
      <div class="ck-filter-form" :style="{ height: conHeight }">
        <div ref="input-container" class="form-item-container">
          <div class="form-item">
            <span class="form-item-label">床位类型：</span>
            <el-select
              v-model="bedsType"
              placeholder="请选择"
              size="mini"
              style="width: 180px"
              filterable
              clearable
              @change="typeChange"
            >
              <el-option
                v-for="item in bedsTypes"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </div>
        </div>
      </div>
    </Container>
    <Container height="fill" style="padding: 0px; overflow: hidden">
      <div
        v-loading="warploading"
        class="main-wrap"
        style="display: flex; height: 100%; overflow-y: hidden"
      >
        <!-- <Empty v-if="bedsListPer.length === 0" style="margin: 20px auto" /> -->
        <!-- <div
          v-for="(item, index) in bedsListPer"
          :key="index"
          class="content-collection"
          :style="maxHeight"
        >-->
        <!-- 病区 -->
        <div v-if="nurseCellName" class="left">
          {{ nurseCellName }} {{ `（${deptName}）` }}
        </div>
        <!-- 病房 -->
        <div ref="heightdepartment" class="department-box">
          <div v-for="item in bedsListPer" :key="item.name" class="ment">
            <!-- :style="'width:' + (index1 * 110 + (index1 - 1) * 10) + 'px'" -->
            <div class="ment-box">
              <!-- @click.prevent.stop="getData(item1)" -->
              <div
                v-for="(item1, index2) in item.children"
                :key="index2"
                :class="`ment-position ${item1.className} ${item1.sexColor}`"
                
                @contextmenu.prevent.stop="rightClick($event, item1)"
              >
                <div
                  :class="
                    item1.changeType === '明日出院'
                      ? 'up-left-triangle'
                      : item1.changeType === '今日出院'
                      ? 'date-triangle'
                      : 'no-w'
                  "
                >
                  <span style="font-size: 20px; margin-left: -9px">{{
                    item1.changeType === "明日出院"
                      ? "明"
                      : item1.changeType === "今日出院"
                      ? "今"
                      : ""
                  }}</span>
                </div>
                <div class="room-status">
                  <img
                    v-if="item1.isHisConfirm === '1'"
                    src="../../assets/image/time-icon.png"
                    class="status-img"
                    alt
                    style="width: 12px; height: 12px"
                  />
                  <!-- <img
                    v-if="item1.occupationState === '0'"
                    src="../../assets/image/occupationState-logo.png"
                    class="status-img"
                    alt
                  /> -->
                  
                  <img
                    v-if="item1.ifGy === '1'"
                    src="../../assets/image/red-flone.png"
                    class="status-img"
                    alt
                    style="width: 10px; height: 14px"
                  />
                </div>
                <div class="room-num">{{ item1.name }}<div v-if="item1.prebundledType === '1'" style="color: red;font-size: 15px;margin-left: 5px;margin-top: 3px">预</div></div>
                <div v-if="item1.patinetName" class="ment-name">
                  {{ item1.patinetName }}
                </div>
                <div v-if="item1.ylzzName" class="medical-name">
                  医生组长：{{ item1.ylzzName }}
                </div>
                <!-- <button @click="getNothing(item,item1)">get</button> -->
                <!-- <div
                  v-if="item1.occupationState === '0'"
                  class="ment-name"
                >{{ item1.occupationBed.patientName }}</div> -->
                <div
                  v-if="
                    item1.bedState === 'b' &&
                    item1.sexColor === 'three-div' &&
                    item1.occupationState !== '0'
                  "
                  class="ment-name"
                >
                  <img
                    src="../../assets/image/eeeeeee.png"
                    class="bed-img"
                    alt
                  />
                </div>
                <div
                  v-if="
                    item1.bedState === 'b' &&
                    item1.sexColor !== 'three-div' &&
                    item1.occupationState !== '0'
                  "
                  class="ment-name"
                >
                  <img
                    src="../../assets/image/ffffff.png"
                    class="bed-img"
                    alt
                  />
                </div>
              </div>
            </div>
            <div class="house-num">{{ item.roomNum }}</div>
            <!-- </div> -->
          </div>
        </div>
        <!-- 预约绑定 -->
        <div v-show="menuVisibleBtn">
          <ul id="menuss" class="menuss" @mouseover="onleitve">
            <li v-if="advance.prebundledType === '1'" class="menu__item" @click="deletebtn">取消预约</li>
            <li v-else class="menu__item" @click="btn">预约绑定</li>
          </ul>
        </div>

      </div>
    </Container>

    <!-- 弹出框 -- 预绑定 -->
    <el-dialog
      title="预绑定"
      :visible.sync="prebundledShow"
      width="90%"
      :before-close="handlerCancellation"
    >
      <div class="search-box">
        <div ref="input-container" class="form-item-container-two">
          <div class="form-item">
            <span class="form-item-label">院区：</span>
            <span>
              <el-select
                v-model="crossForm.region"
                placeholder="请选择院区"
                clearable
                size="mini"
                style="width: 150px"
              >
                <el-option
                  v-for="item in regionoptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </span>
          </div>
          <div class="form-item">
            <span class="form-item-label">是否跨科室：</span>
            <el-select
              v-model="crossForm.isCrossNurse"
              placeholder="请选择科室"
              size="mini"
              style="width: 180px"
              filterable
              clearable
            >
              <el-option
                v-for="(item, index) in bedUggIeBCList"
                :key="index"
                :value="item.value"
                :label="item.label"
              />
            </el-select>
          </div>
          <div class="form-item">
            <span class="form-item-label">姓名：</span>
            <el-input v-model="crossForm.name" size="mini" style="width: 180px" />
          </div>
          <div class="form-item">
            <span class="form-item-label">日期：</span>
            <el-date-picker
              v-model="crossForm.createTime"
              type="daterange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              value-format="yyyy-MM-dd HH:mm:ss"
              :default-time="['00:00:00', '23:59:59']"
              size="mini"
            />
          </div>
          <!-- <div class="form-item">
              <Sort @sortClick="sortClick" />
            </div> -->
        </div>
        <div class="right-btn-container">
          <div
            v-for="(item, index) in buttonCrossList"
            :key="index + '_'"
            class="form-item-btn"
          >
            <Button
              :type="item.type"
              :icon="item.icon"
              :loading="item.loading"
              @click="item.handlerClick"
              >{{ item.label }}</Button
            >
          </div>
          <span
            v-show="SeeShowCloseAndOpen"
            class="more-text"
            @click="openSeeForm"
            >{{ openSeeText }}</span
          >
        </div>
      </div>
      
      <el-table
        ref="selectList"
        v-loading="tableLoading"
        :data="tableDataList"
        highlight-current-row
        border
        :header-cell-style="{ background: '#f5f7fa' }"
        style="width: 100%;height: 400px;"
        @select="_handleSelectionChange"
      >
        <!-- <el-table-column type="selection" align="center" width="55" /> -->
        <el-table-column
          type="selection"
          align="center"
          width="55"
        />
        <el-table-column type="index" align="center" label="序号" width="55" />
        <el-table-column
          prop="createTime"
          align="center"
          label="登记日期"
          width="240"
        />
        <el-table-column align="center" label="姓名" width="110">
          <template v-slot="scope">
            <a
              v-if="!scope.row.tipRemark"
              class="a-link"
              @click="handleToPerson(scope.row)"
            >{{ scope.row.name }}</a>
            <el-tooltip v-else :content="scope.row.tipRemark" placement="top">
              <span>{{ scope.row.name
              }}<i
                style="margin-left: 5px; color: #e6a23c"
                class="el-icon-warning-outline"
              /></span>
            </el-tooltip>
          </template>
        </el-table-column>
        <el-table-column prop="sex" align="center" label="性别" width="100">
          <template slot-scope="scope">
            {{ scope.row.sex === "1" ? "男" : "女" }}
          </template>
        </el-table-column>
        <el-table-column prop="patientTag" align="center" label="患者类型">
          <template slot-scope="scope">
            {{ patientTagConvert(scope.row.patientTag) }}
          </template>
        </el-table-column>
        <el-table-column prop="deptName" align="center" label="拟入院科室" />
        <el-table-column prop="createBy" align="center" label="申请医生" width="140" />
        <el-table-column prop="diagName" align="center" label="入院诊断" />
        <el-table-column prop="isCrossNurse" align="center" label="是否跨区" width="100">
          <template slot-scope="scope">
            <span v-if="scope.row.isCrossNurse === '0'">否</span>
            <span v-if="scope.row.isCrossNurse === '1'">是</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="applicationBedno"
          align="center"
          label="床位号"
          width="120"
        />
        <!-- <el-table-column
          prop="nucleicacid"
          align="center"
          label="核酸日期"
          width="240"
          :formatter="formatterTime"
        /> -->
        <el-table-column
          prop="predate"
          align="center"
          label="期望入院时间"
          width="200"
        />
        <el-table-column prop="remark" align="center" label="备注" />
        <!-- <el-table-column align="center" label="操作" width="140">
          <template slot-scope="scope">
            <el-tooltip
              class="item"
              effect="dark"
              content="删除"
              placement="top"
              style="margin-left: 10px"
            >
              <i
                class="el-icon-delete"
                style="
                  padding-top: 4px;
                  font-size: 20px;
                  color: #207efa;
                  cursor: pointer;
                "
                @click="handleDel(scope.row)"
              />
            </el-tooltip>
            <el-tooltip
              class="item"
              effect="dark"
              content="发送通知"
              placement="top"
              style="margin-left: 10px"
            >
              <i
                class="el-icon-set-up"
                style="
                  padding-top: 4px;
                  font-size: 20px;
                  color: #207efa;
                  cursor: pointer;
                "
                @click="handlesendtip(scope.row)"
              />
            </el-tooltip>
            <el-tooltip
              class="item"
              effect="dark"
              content="跳转"
              placement="top"
              style="margin-left: 10px"
            >
              <img src="../../assets/image/Jumps.png" alt="" style="
                  width: 18px;
                  height: 18px;
                  color: #207efa;
                  cursor: pointer;
                "
                @click="handlefan(scope.row)">
            </el-tooltip>
          </template>
        </el-table-column> -->
      </el-table>
      <!-- 分页 -->
      <Pagination
        :total="pageForm.total"
        :page="pageForm.currentPage"
        :page-size="pageForm.pageSize"
        @pagation="pagationChange"
      />

      <span slot="footer" class="dialog-footer">
        <el-button @click="handlerCancellation">取 消</el-button>
        <el-button type="primary" @click="changeDetermine">确 定</el-button>
      </span>
    </el-dialog>
  </ContainerGroup>
</template>
<script>
import Container from "../../components/Container.vue";
import second from "./second.vue";
import Pagination from '../../components/pagination/index'
import {
  getBedReservationQuery,
  sendMessageToDoctor,
  updateRootState
} from '../../utils/apis/InpatientRegistration.js'
import { getPreBoundBedDetail, addPrebundled, updatePrebundled, getUnbind } from "../../utils/apis/prebundled";
// import OperationContainer from "../../components/OperationContainer.vue";
export default {
  name: "PrebundledFilst",
  components: { Container, second, Pagination },
  data() {
    return {
      bedsType: "1",
      bedsTypes: [
        // {
        //   label: "全部",
        //   value: "",
        // },
        {
          label: "集中",
          value: "1",
        },
        // {
        //   label: "非集中",
        //   value: "0",
        // },
      ],
      occupationState: true,
      occupybed: false,
      warploading: true,
      bedType: ["1"], // 床位类型
      widthStyle: "width:" + window.screen.width + "px",
      tableLoading: false,
      maxHeight: "100%",
      nodata: false,
      yuanId: "",
      bedNo: "",
      filterElements: [
        {
          key: "depet",
          type: "Select",
          label: "科室",
          value: "",
          options: [],
        },
        {
          key: "inpatient",
          type: "Select",
          label: "病区",
          value: "",
          options: [],
        },
      ],
      buttonList: [
        {
          label: "查询",
          type: "primary",
          icon: "search",
          handlerClick: this.openMent,
        },
        {
          label: "重置",
          type: "info",
          icon: "reset",
          handlerClick: this.handlerReset,
        },
      ],
      conHeight: "35px",
      showOpen: false,
      openText: "展开",
      tableData: [],
      bedListArr: [], // 全部床位列表
      patientName: "", // 病人姓名
      patientId: "", // 病人id
      changeBedbedId: "",
      changeBedpatientId: "", // 病人id
      changeBedpatientName: "", // 病人姓名
      bedloading: false,
      patientloading: false,
      deptCodeR: "",
      ifGy: "",
      sexchecked: false,
      patinetName: null,
      bedOrdet: {}, // 选中床的信息
      patientSex: "",
      form: {
        hospitalArea: {
          sxhospital: true,
          xghospital: true,
        },
        department: "全部",
        illnessArea: "全部",
        parms: {},
        bedState: {
          kongbed: true,
          feikongbed: true,
        },
        bedType: {
          jzbed: true,
          fjzbed: false,
        },
        departmentoptions: [
          {
            label: "全部",
            value: "全部",
          },
        ],
        illnessAreaoptions: [
          {
            label: "全部",
            value: "全部",
          },
        ],
      },
      ruleFormSelect: {
        deptCodeoptions: [],
        nurseCellCodeoptions: [],
      },
      ruleForm: {
        deptCode: "",
        nurseCellCode: "",
      },
      bedinfo: "",
      deptNameinfo: "",
      occupationId: "",
      occupybedNo: "",
      occupationBed: {},
      routeParams: {},
      bedsList: [],
      bedsListPer: [],
      nurseCellName: "",
      nurseCellCode: "",
      deptName: "",
      deptCode: "",
      areaName: "",
      currentBed: "",
      yard: "",
      regionoptions: [
        {
          value: "1",
          label: "三香院区",
        },
        {
          value: "2",
          label: "浒关院区",
        },
      ],
      region: "1",
      menuVisibleBtn: false,
      prebundledShow: false,
      buttonCrossList: [
        {
          label: '查询',
          type: 'primary',
          icon: 'search',
          handlerClick: this.handerCrossSearch,
          loading: false
        },
        {
          label: '重置',
          type: 'info',
          icon: 'reset',
          handlerClick: this.handlerCrossReset
        }
      ],
      SeeShowCloseAndOpen: false,
      openSeeText: '展开',
      crossForm: {
        name: '',
        isCrossNurse: '',
        createTime: [],
        region: ''
      },
      bedUggIeBCList: [
        {
          label: '全部',
          value: '2'
        },
        {
          label: '是',
          value: '1'
        },
        {
          label: '否',
          value: '0'
        }
      ],
      pageForm: {
        total: 0,
        currentPage: 1,
        pageSize: 20
      },
      tableDataList: [],
      multSelectedData: {},
      bedId: '',
      typeId: '',
      advance: ''
    };
  },
  created() {},
  mounted() {
    // this.bedsType = this.$route.query.bedsType
    this.nurseCellName = this.$route.query.areaName;
    this.deptName = this.$route.query.deptName;
    this.yard = this.$route.query.yard;
    // console.log(this.bedsType)
    this._routeParams();
    this.openMent();
    this.yuanId = this.routeParams.districtCodeList;
    window.addEventListener("resize", this.initShowCloseOrOpen);
  },
  beforeDestroy() {
    window.removeEventListener("resize", this.initShowCloseOrOpen);
  },
  methods: {
    initShowCloseOrOpen() {
      setTimeout(() => {
        this.showOpen = this.$refs["input-container"].scrollHeight > 35;
      }, 50);
    },
    typeChange(val) {
      // 这里发生变化直接调用查询接口
      if (val) {
        this.bedType = val;
      } else {
        this.bedType = "";
      }
      this.warploading = true;
      this.openMent(val);
    },
    // 获取床位
    openMent(data) {
      this.close = true;
      this.widthStyle = "width:380px;";
      // console.log('this.routeParams', this.routeParams)
      // New
      const params = {
        areaCode: this.routeParams.areaCode,
        bedState: "",
        bedType: data || this.bedsType,
        deptCode: this.routeParams.deptCode,
        districtCode: this.routeParams.districtCodeList,
        bedNo: "",
      };
      getPreBoundBedDetail(params).then((res) => {
        if (res.data.code === 200) {
          this.bedsListPer = res.data.data;
          // console.log('this.bedsListPer', this.bedsListPer);
          // this.initPageData()
          this.warploading = false;
        } else {
          this.$message.error(res.data.message);
        }
      });
    },
    openForm() {
      this.conHeight = this.openText === "展开" ? "auto" : "35px";
      this.openText = this.openText === "展开" ? "收起" : "展开";
    },
    _routeParams() {
      const obj = JSON.parse(sessionStorage.pageTabList);
      // console.log(obj)
      const paramss = obj.filter((item) => {
        return item.name === "床位预绑定列表-预约详情";
      });
      // console.log('--------', paramss);
      this.routeParams = paramss[0].params;
      // console.log(this.routeParams)
      // this.bedType = this.routeParams.bedType[0] // 床位类型
      // this.bedStatus = this.routeParams.bedStatus[0]
      this.deptCode = this.routeParams.deptCode;
      this.nurseCellCode = this.routeParams.areaCode;
    },
    rightClick(MouseEvent, item) {
      console.log(MouseEvent,item);
      this.advance = item
      if (!item.changeType) {
        return
      }
      this.bedId = item.bedNo
      this.menuVisibleBtn = true;
      var menu = document.querySelector('#menuss')
      if (MouseEvent.screenX < 100) {
        menu.style.left = MouseEvent.clientX + 'px'
        menu.style.top = MouseEvent.clientY + 'px'
      }
      if (MouseEvent.screenX > 100) {
        menu.style.left = MouseEvent.clientX + 4 + 'px'
        menu.style.top = MouseEvent.clientY + 7 + 'px'
      }
      document.addEventListener('click', this.foo)
    },
    foo() {
      // 取消鼠标监听事件 菜单栏
      this.menuVisibleBtn = false;
      document.removeEventListener("click", this.foo); // 要及时关掉监听，不关掉的是一个坑，不信你试试，虽然前台显示的时候没有啥毛病，加一个alert你就知道了
    },
    // 鼠标移上去高亮
    onleitve() {
      var lis = document.getElementsByTagName('li')
      for (let i = 0; i < lis.length; i++) {
        lis[i].onmouseover = function() {
          this.style.color = '#217DFA'
        }
        lis[i].onmouseout = function() {
          this.style.color = '#555555'
        }
      }
    },
    // 绑定预约
    btn() {
      this.typeId = 1
      this.prebundledShow = true;
      this.getPreCurDate()
      this.getDataList()
    },
    // 取消预约
    deletebtn() {
      // this.typeId = 2
      // this.prebundledShow = true;
      // this.getPreCurDate()
      // this.getDataList()
      this._getUnbind()
    },
    _getUnbind() {
      this.$confirm({
        content: "是否确认取消患者预绑？",
        title: "确认信息",
        okFn: (res) => {
          const param = {
            bedId: this.advance.bedNo,
            name: this.advance.patinetName
          }
          getUnbind(param).then(res => {
            if (res.data.code === 200) {
              this.$message.success(res.data.message)
              this.openMent()
            } else {
              this.$message.error(res.data.message)
            }
          })
        },
        cancelFn: (res) => {
          console.log("取消");
        },
      });
    },
    handlerCancellation() {
      this.prebundledShow = false;
    },
    changeDetermine() {
      this.$confirm({
        content: "确定预绑定吗？",
        title: "确认信息",
        okFn: (res) => {
          const params = {
            bedId: this.bedId,
            patientId: this.multSelectedData.preid,
            name: decodeURIComponent(this.multSelectedData.name)
          }
          addPrebundled(params).then(res => {
            if (res.data.code === 200) {
              this.$message.success(res.data.message)
              this.prebundledShow = false;
              this.openMent()
            } else {
              this.$message.error(res.data.message)
            }
          })
        },
        cancelFn: (res) => {
          console.log("取消");
        },
      });
    },
    openSeeForm() {
      this.SeeHeight = this.openSeeText === '展开' ? 'auto' : '35px'
      this.openSeeText = this.openSeeText === '展开' ? '收起' : '展开'
    },
    handerCrossSearch() {
      this.pageForm.currentPage = 1
      this.getDataList()
    },
    getDataList() {
      const params = {
          startTime: this.crossForm.createTime[0],
          endTime: this.crossForm.createTime[1],
          isCrossNurse: this.crossForm.isCrossNurse,
          name: this.crossForm.name,
          yard: this.crossForm.region,
          pageIndex: this.pageForm.currentPage,
          pageSize: this.pageForm.pageSize
        }
        this.tableLoading = true
        getBedReservationQuery(params).then((res) => {
          if (res.data.code === 200) {
            this.tableLoading = false
            this.tableDataList = res.data.data.list
            this.pageForm.total = res.data.data.total || 0
          } else {
            this.$message.error(res.data.message)
          }
        })
    },
    handlerCrossReset() {
      this.crossForm.name = ''
      this.crossForm.region = ''
      // this.crossForm.createTime = "";
      this.crossForm.isCrossNurse = ''
      this.pageForm.currentPage = 1
      // this.getPreCurDate()
      this.getDataList()
    },
     // 设备表格单选功能
     _handleSelectionChange(selection, row) {
          this.$refs.selectList.clearSelection()
          if (selection.length === 0) {
            // 判断selection是否有值存在
            return
          }
          if (row) {
            this.$refs.selectList.toggleRowSelection(row, true)
            this.multSelectedData = row
          }
      },
    pagationChange(payload) {
      this.pageForm.currentPage = payload.page
      this.pageForm.pageSize = payload.pageSize
      this.getDataList()
    },
    getPreCurDate() {
      const gqTime = new Date(new Date().getTime() - 24 * 60 * 60 * 1000)
      const preDate =
        gqTime.getFullYear() +
        '-' +
        (gqTime.getMonth() + 1) +
        '-' +
        gqTime.getDate()
      const date =
        new Date().getFullYear() +
        '-' +
        (new Date().getMonth() + 1) +
        '-' +
        new Date().getDate()
      this.crossForm.createTime = [
        preDate + ' ' + '00:00:00',
        date + ' ' + '23:23:59'
      ]
    },
    patientTagConvert(val) {
      let typeName = '普通患者'
      if (val === '1') {
        typeName = '日间手术'
      } else if (val === '2') {
        typeName = '院前准备'
      } else if (val === '4') {
        typeName = '日间输注'
      }
      return typeName
    },
    handleDel(row) {
      // 删除
      this.$confirm({
        title: '温馨提示',
        content: `请确认是否已和&nbsp;<span style="color:red;">${row.createBy}-${row.jobNumber}</span>&nbsp;确认删除该数据?`,
        okText: '确定',
        cancelText: '取消',
        okFn: () => {
          const param = Array.isArray(row) ? row : [row.preid]
          updateRootState(param).then((res) => {
            if (res.data.code === 200) {
              this.$message.success(res.data.message)
              this.getList()
            } else {
              this.$message.error(res.data.message)
            }
          })
        },
        cancelFn: () => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        }
      })
    },
    handlesendtip(row) {
      this.$confirm({
        content: '集管床位已满，请考虑走院前流程',
        title: '确认信息',
        okFn: (res) => {
          const param = {
            name: row.name,
            jobNumber: row.jobNumber,
            diagName: row.diagName,
            nurseCellName: row.nurseCellName,
            remark: '集管床位已满，请考虑走院前流程'
          }
          sendMessageToDoctor(param).then((res) => {
            if (res.data.code === 200) {
              this.$message.success(res.data.message)
              this.getList()
            } else {
              this.$message.error(res.data.message)
            }
          })
        },
        cancelFn: (res) => {
          console.log('取消')
        }
      })
    },
    handlefan() {
      this.$router.push('/prebundled/index')
    }
  },
};
</script>
<style lang="less" scoped>
.drawer-warp {
  height: 100%;
}
.form-item {
  min-width: 280px;
  height: 28px;
  margin-bottom: 30px;
}
.department-box {
  padding: 12px 11px 10px 10px;
  box-sizing: border-box;
  display: flex;
  // justify-content: space-between;
  // overflow: hidden;
  overflow-y: auto;
  height: 100%;
  flex-wrap: wrap;
  flex: 1;
}
.form-bed {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  padding: 21px 0 0 29px;
  box-sizing: border-box;
  border-bottom: 1px solid #ccc;
  p {
    margin-right: 45px;
    margin-bottom: 26px;
    .bed-title {
      margin-right: 10px;
    }
  }
}
.drawer-box {
  padding-top: 15px;
  p {
    width: 100%;
    height: 40px;
    background-color: #f4f8fb;
    color: #555555;
    font-size: 16px;
    line-height: 40px;
    padding-left: 15px;
    box-sizing: border-box;
  }
  .box-information {
    width: 100%;
    box-sizing: border-box;
    display: flex;
    padding: 23px 0px 23px 20px;
    box-sizing: border-box;
    overflow: hidden;
    position: relative;
    .basic-box {
      display: flex;
      flex-wrap: wrap;
      overflow: hidden;
      color: #555555;
      div {
        width: 240px;
        // height: 33px;
        line-height: 33px;
        font-size: 14px;
        margin-right: 12px;
      }
    }
    .more-text {
      width: 100px;
      position: absolute;
      right: 10px;
      bottom: 20px;
      color: rgba(24, 144, 255, 100);
      cursor: pointer;
      font-size: 14px;
    }
  }
  .demo-ruleForm {
    box-sizing: border-box;
    padding: 15px 18px 0 11px;
    .formitem {
      display: flex;
      justify-content: space-between;
    }
    /deep/ .el-form-item__error {
      padding: 0 !important;
    }
    .el-form-item {
      margin-bottom: 10px !important;
    }
    /deep/ .el-form-item__label {
      color: #555555 !important;
    }
  }
  .el-table /deep/.cell {
    font-size: 14px !important;
  }
  .el-button /deep/ span {
    font-size: 14px !important;
  }
}
.surebtn {
  position: absolute;
  right: 9%;
  bottom: 7%;
  width: 17px;
  display: inline-block;
  height: 17px;
  border: 1px solid #62a3fd;
  border-radius: 50%;
  background-color: #62a3fd;
}
.surebtn1 {
  position: absolute;
  right: 9%;
  bottom: 7%;
  width: 17px;
  display: inline-block;
  height: 17px;
  border: 1px solid rgb(220, 223, 230);
  border-radius: 50%;
}
.seximg {
  width: 15px;
  height: 15px;
  margin-right: 7px;
  display: inline-block;
}
.seximg img {
  width: 15px;
  height: 15px;
}
.outpatient-department {
  width: 50px;
  height: 24px;
  background: #37c0cd;
  border: 1px solid #37c0cd;
  color: #ffffff;
  line-height: 24px;
  display: inline-block;
  border-radius: 4px;
  margin-right: 10px;
  text-align: center;
}
.youxian {
  width: 50px;
  height: 24px;
  background: #fc6161;
  border: 1px solid #fc6161;
  color: #ffffff;
  line-height: 24px;
  display: inline-block;
  border-radius: 4px;
  margin-right: 10px;
  text-align: center;
}
.no-craatperpro {
  width: 100%;
  height: 100%;
  text-align: center;
  position: absolute;
  top: 60px;
  left: 0;
  background-color: #fff;
}
.stayinbed-name {
  width: 50px;
  text-align: center;
  height: 24px;
  display: inline-block;
  line-height: 24px;
  background: #ddebff;
  color: #2b80ff;
  border: 1px solid #2b80ff;
  border-radius: 4px;
}
.register {
  padding: 7px 10px;
  display: inline-block;
  cursor: pointer;
  box-sizing: border-box;
  background-color: #f5b923;
  color: #ffffff;
  border-radius: 5px;
  margin-top: 10px;
}
.informationbox {
  width: 280px;
  margin: 5px auto;
  padding: 12px 5px 10px 15px;
  box-sizing: border-box;
  // cursor: pointer;
  background: #ffffff;
  border: 1px solid #eeeeee;
  border-radius: 3px 3px 0px 0px;
  box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.06);
  position: relative;
}
.view-patients {
  height: 46px;
  background: #f4f8fb;
  border: 1px solid #e7ecf8;
  color: #555555;
  padding: 16px 16px 14px 18px;
  box-sizing: border-box;
  display: flex;
  justify-content: space-between;
  align-items: center;
  span {
    font-size: 16px;
  }
}
.patients-content {
  height: 161px;
  padding: 21px 0 0 18px;
  box-sizing: border-box;
  line-height: 20px;
  color: #555555;
  p {
    font-size: 14px;
    margin-bottom: 19px;
  }
}
.emergency-treatment {
  width: 50px;
  height: 24px;
  display: inline-block;
  background: #ffa712;
  border: 1px solid #f5b923;
  color: #ffffff;
  border-radius: 4px;
  margin-right: 10px;
  text-align: center;
}
.right-patients {
  flex: 0 0 300px;
  // width: 300px;
  display: flex;
  height: calc(100% - 0px);
  background: #ffffff;
  flex-direction: column;
  margin-left: 12px;
  padding-bottom: 20px;
  box-sizing: border-box;
  position: relative;
  background-color: #fff;
  border-left: 10px solid #f0f2f5;
}
.neir-patients {
  width: 100%;
  height: calc(100% - 24px);
  overflow-y: auto;
  padding-bottom: 10px;
  box-sizing: border-box;
}
.content-collection {
  flex: 1;
  display: flex;
  background: #fff;
  height: calc(100% - 0px);
  overflow-y: hidden;
}
.left {
  width: 40px;
  background-color: #2b80ff;
  color: #fff;
  font-size: 20px;
  -webkit-writing-mode: vertical-rl;
  writing-mode: vertical-rl;
  display: flex;
  justify-content: center;
  align-items: center;
  flex: 0 0 40px;
}
.status-img {
  margin-right: 10px;
}
.room-status {
  height: 30px;
  text-align: right;
}
#durgbox {
  line-height: 46px;
  width: 159px;
  height: 46px;
  opacity: 0.9;
  border-radius: 3px;
  font-size: 16px;
  margin-bottom: 6px;
  background-color: #fff;
  border: 2px dashed yellow;
  position: absolute;
  z-index: 99999;
  padding-inline-start: 0px;
}
.bed-img {
  width: 30px;
  height: 18px;
}
.house-num {
  border-radius: 3px;
  font-size: 16px;
  height: 40px;
  width: 100%;
  line-height: 40px;
  text-align: center;
}
// 颜色归类
.one-span {
  color: #4090ff;
  border-color: #4090ff;
  background-color: #f1f7ff;
}
.two-span {
  color: #fb7c75;
  border-color: #fb7c75;
  background-color: #fef3f2;
}
.one-div {
  color: #ffffff;
  background-color: #71acfd;
}
.two-div {
  color: #ffffff;
  background-color: #b0d1fe;
}
// 灰色
.three-div {
  color: #555555;
  background-color: #f3f2f2;
}
.four-div {
  color: #ffffff;
  background-color: #fc9691;
}
.five-div {
  color: #ffffff;
  background-color: #fdbdba;
}
// 颜色归类
.room-num {
  font-size: 21px;
  display: flex;
  flex-direction: row;
  // text-align: center;
  justify-content: center;
}
.ment-name {
  text-align: center;
  padding-top: 3px;
  box-sizing: border-box;
}
.medical-name {
  text-align: center;
  padding-top: 3px;
  font-size: 12px;
}
.ment-state {
  display: inline-block;
  width: 45px;
  height: 22px;
  line-height: 20px;
  text-align: center;
  background: #ffffff;
  border: 1px dashed;
  border-radius: 5px;
}

.ment-box {
  width: 100%;
  height: 113px;
  display: flex;
  justify-content: space-between;
  position: relative;
}
.ment-position1 {
  border: 3px dashed #ffd905 !important;
  box-sizing: border-box;
}
.no-ment-position1 {
  border: none;
}
.ment-position {
  width: 110px;
  height: 110px;
  opacity: 0.9;
  border-radius: 3px;
  font-size: 16px;
  cursor: pointer;
  margin-right: 12px;
  position: relative;
}
.ment-position:last-of-type {
  margin-right: 0;
}
.department-box {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  margin-left: 10px;
}
.ment {
  height: 150px;
  opacity: 1;
  background: #ffffff;
  border: 1px solid #eeeeee;
  border-radius: 6px;
  box-shadow: 0px 3px 3px 0px rgba(0, 0, 0, 0.15);
  background-color: #fff;
  margin: 0 15px 14px 0;
  box-sizing: border-box;
}
.ck-filter-form {
  display: flex;
  align-items: top;
  overflow: hidden;
  .form-item-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    .form-item {
      display: flex;
      align-items: center;
      width: 295px;
      margin: 3px;
      margin-right: 15px;
      margin-bottom: 10px;
      .form-item-label {
        color: #909399;
        text-align: right;
        white-space: nowrap;
      }
    }
  }
  
}
.right-btn-container {
    text-align: center;
    display: flex;
    padding-top: 5px;
    .form-item-btn {
      margin: 0px 3px;
    }
    .more-text {
      display: block;
      width: 50px;
      margin-top: 6px;
      color: #2165f9;
      cursor: pointer;
      user-select: none;
    }
  }
.neti-surbtn {
  width: 5px;
  height: 10px;
  border-color: #fff;
  border-style: solid;
  border-width: 0 2px 3px 0;
  transform: rotate(45deg);
  position: absolute;
  top: 1px;
  left: 5px;
}
.surbtn-neti {
  width: 0px;
  height: 0px;
  border-color: #fff;
  border-style: solid;
  border-width: 0 0px 0px 0;
  transform: rotate(45deg);
  position: absolute;
  top: 1px;
  left: 5px;
}
.menuss {
  // height: 90px;
  width: 90px;
  position: absolute;
  // left: -50px;
  // top: 50px;
  z-index: 99;
  padding-inline-start: 0px;
  border-radius: 5px;
  box-shadow: 0px 3px 7px 0px rgba(199, 199, 199, 0.35);
  border: 1px solid #eeeeee;
  background-color: #ffffff;
  // border: 1px solid red;
  .menu__item {
    display: block;
    height: 43px;
    line-height: 43px;
    text-align: center;
    font-size: 14px;
    color: #555555;
    cursor: pointer;
  }
}
.search-box {
  display: flex;
  flex-direction: row;
  margin-bottom: 10px;
}
.form-item-container-two {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    .form-item {
      display: flex;
      align-items: center;
      margin: 3px;
      margin-right: 15px;
      .form-item-label {
        color: #909399;
        text-align: right;
        font-size: 16px;
        white-space: nowrap;
      }
    }
    
  /deep/.form-item {
    min-width: 200px;
    .el-range-editor--mini.el-input__inner {
    width: 220px;
    }
  }
}
/deep/.el-table__body-wrapper {
  overflow: auto !important;
  height: calc(100% - 40px) !important;
}
/deep/ .el-table__header-wrapper .el-checkbox {
  //找到表头那一行，然后把里面的复选框隐藏掉
  display: none;
}
</style>
<style lang="less">
.el-radio__inner {
  width: 17px;
  height: 17px;
}
.form-item-label {
  color: #909399;
  text-align: right;
  font-size: 16px;
  white-space: nowrap;
}
.menu__item {
  display: block;
  height: 43px;
  line-height: 43px;
  text-align: center;
  font-size: 14px;
  color: #555555;
  cursor: pointer;
}

.menu__item1 {
  display: block;
  height: 43px;
  line-height: 43px;
  text-align: center;
  font-size: 14px;
  color: #555555;
  cursor: not-allowed;
}

.menu {
  height: 90px;
  width: 90px;
  position: absolute;
  z-index: 99999;
  padding-inline-start: 0px;
  border-radius: 5px;
  box-shadow: 0px 3px 7px 0px rgba(199, 199, 199, 0.35);
  border: 1px solid #eeeeee;
  background-color: #ffffff;
}
.up-left-triangle {
  position: absolute;
  width: 0;
  height: 0;
  border-left: 30px solid transparent;
  border-right: 30px solid transparent;
  border-bottom: 30px solid orchid;
  transform: rotate(-46deg);
  margin-left: -19px;
  margin-top: -2px;
  color: #555;
  // top: 3;
}
.date-triangle {
  position: absolute;
  width: 0;
  height: 0;
  border-left: 30px solid transparent;
  border-right: 30px solid transparent;
  border-bottom: 30px solid khaki;
  transform: rotate(-46deg);
  margin-left: -19px;
  margin-top: -5px;
  color: #555;
}
.no-w {
  position: absolute;
  width: 0;
  height: 0;
  margin-top: -2px;
}


</style>
